{include file="header/index" /}
<!--//laypage翻页需要 start-->
<script type="text/javascript" src="__JS__/layer/layer.js"></script>
<script type="text/javascript" src="__JS__/laypage/laypage.js"></script>
<script type="text/javascript" src="__JS__/laytpl/laytpl.js"></script>
<script type="text/javascript" src="__JS__/info.js"></script>
<link rel="stylesheet" href="__CSS__/laypage.css" />
<!--//laypage翻页需要 end-->

<body>
	<div class="container whitebg">

		<!-- Tab panes -->
		<div class="tab-content">
			<div role="tabpanel" class="tab-pane active operation_center" id="home">
				<form class="form-inline mt15 mb15">
					<div class="form-group mr20">
						<label>行政区域名称</label>
						<input type="text" id="company_name" class="form-control  input-min" placeholder="请输入名称">
					</div>
					<div class="form-group mr20">
						<label>联系人</label>
						<input type="text" id="name-profile" class="form-control input-min" placeholder="请输入联系人">
					</div>
					<div class="form-group mr20">
						<label>联系电话</label>
						<input type="text" class="form-control input-min" id="phone-profile" placeholder="请输入联系电话">
					</div>
					<a type="button" class="btn btn-primary fr input-Btn" href="{:url('Operations/AddAdministrative')}">
						<i class="glyphicon glyphicon-plus"></i>&nbsp;&nbsp;新增行政区域</a>
				</form>
				<form class="form-inline mt15 mb15">
					<div class="form-group mr20">
						<label>起止时间</label>
						<input class="form-control input-time" type="text" id="datetimeStart" readonly class="form_datetime">
						<input class="form-control  input-time" type="text" id="datetimeEnd" readonly class="form_datetime">
					</div>
					<div class="form-group mr20">
						<label>负责区域</label>
						<select id="province" class="form-control input-min">
							<option value="0">--请选择省份--</option>
						</select>
						<select id="city" class="form-control input-min">
							<option value="0">--请选择城市--</option>
						</select>
						<select id="area" class="form-control input-min">
							<option value="0">--请选择区域--</option>
						</select>
					</div>
					<button type="button" id="search-profile" class="btn btn-default  input-Btn">搜索</button>
				</form>
				<table class="table table-bordered">
					<thead>
						<tr>
							<th><input type="checkbox" onclick="selectall(this,'box1')" /></th>
							<th>行政区域名称</th>
							<th>工程人员数</th>
							<th>账号</th>
							<th>联系人</th>
							<th>联系电话</th>
							<th>负责区域</th>
							<th>所属运营中心</th>
							<th>创建时间</th>
							<th>账户状态</th>
							<th>操作</th>
						</tr>
					</thead>

					<script id="list-template-profile" type="text/html">
						{{# for(var i=0;i
						<d.length;i++){ }} <tr>
							<td><input class="select" type="checkbox" name="box1" value="{{d[i].a_id}}" /></td>
							<td>{{d[i].administrative_company_name}}</td>
							<td>{{d[i].e_count}}</td>
							<td>
								{{#if(d[i].account){ }} {{d[i].account}} {{# }else{ }} 账号已解绑 {{# } }}
							</td>
							<td>{{d[i].name}}</td>
							<td>{{d[i].phone}}</td>
							<td>{{d[i].area_name}}</td>
							<td>{{d[i].operation_company_name}}</td>
							<td>{{d[i].add_time}}</td>
							{{# if(d[i].status==1){ }}
							<td>正常</td>
							{{# }else{ }}
							<td style="color: red">冻结</td>
							{{# } }}
							<td>
								<a href="{:url('Operations/details')}?id={{d[i].a_id}}&e_count={{d[i].e_count}}">查看</a>
								<a href="{:url('Operations/editProfile')}?id={{d[i].a_id}}">修改</a>
								{{#if(d[i].account){ }}
								<a href="javascript:;" id="del" onclick="jiebang({{d[i].a_id}})" value="{{d[i].a_id}}">帐号解绑</a>{{# } }}
							</td>
							</tr>
							{{# } }}
					</script>
					<tbody id="list-content-profile"></tbody>
				</table>
				<div class="clearfix" style="float:right;margin: 0 auto;">
					<span class="fl mr20 mt5" id="count-profile">共{$count}条数据</span><span id="allpage-profile" class="fl  mr20 mt5"></span><span class="fl" id="AjaxPage-profile"></span>
				</div>
				<!-- 加载动画 -->
				<div class="spiner-example-profile">
					<div class="sk-spinner sk-spinner-three-bounce">
						<div class="sk-bounce1"></div>
						<div class="sk-bounce2"></div>
						<div class="sk-bounce3"></div>
					</div>
				</div>

				<div class="batchdelbtn" onclick="delmseeage('是否删除所有选中的信息','box1')">批量删除</div>
				<!--<div class="recyclebtn">回收站</div>-->
				<div class="clearfix"></div>
			</div>
		</div>
	</div>

</body>

</html>
<script type="text/javascript">
	//行政中心
	function Ajaxpage_profile(curr) {
		var company_name = $("#company_name").val();
		var phone = $("#phone-profile").val();
		var name = $("#name-profile").val();
		var area_id = $("#area").val();
		var datetimeStart = $("#datetimeStart").val();
		var datetimeEnd = $("#datetimeEnd").val();
		$.getJSON('{:url("Operations/index")}', {
			page: curr || 1,
			area_id: area_id,
			datetimeEnd: datetimeEnd,
			datetimeStart: datetimeStart,
			name: name,
			phone: phone,
			company_name: company_name
		}, function(data) {
			$(".spiner-example-profile").css('display', 'none'); //数据加载完关闭动画
			if(data.data == '') {
				$("#list-content-profile").html('<td colspan="20" style="padding-top:10px;padding-bottom:10px;font-size:16px;text-align:center">暂无数据</td>');
				$('#count-profile').html("共" + data.page.count + "条数据");
				$("#allpage-profile").remove();
				$("#AjaxPage-profile").remove();
			} else {
				var tpl = document.getElementById('list-template-profile').innerHTML;
				laytpl(tpl).render(data.data, function(html) {
					document.getElementById('list-content-profile').innerHTML = html;
					$('#count-profile').html("共" + data.page.count + "条数据");
				});
				laypage({
					cont: $('#AjaxPage-profile'), //容器。值支持id名、原生dom对象，jquery对象,
					pages: data.page.allpage, //总页数
					skip: true, //是否开启跳页
					skin: '#337ab7', //分页组件颜色
					curr: curr || 1,
					first: '首页', //若不显示，设置false即可
					last: '尾页', //若不显示，设置false即可
					groups: 3, //连续显示分页数
					jump: function(obj, first) {
						if(!first) {
							Ajaxpage_profile(obj.curr)
						}
						$('#allpage-profile').html('第' + obj.curr + '页，共' + '<i>' + obj.pages + '</i>' + '页');
						var pagenum = $("#allpage-profile i").html();
						$('.laypage_total input').attr('max', pagenum);
						var text = document.getElementsByClassName('laypage_skip')[0];
						if(text) {
							text.onkeyup = function() {
								this.value = this.value.replace(/\D/g, '');
								if(text.value > pagenum) {
									text.value = pagenum;
								}
							}
						}
					}
				});
			}
		});
	}
	Ajaxpage_profile();
	//行政区域
	$(".profile").click(function() {
		Ajaxpage_profile();
	});
	//搜索
	$('#search-profile').click(function() {
		Ajaxpage_profile();
	});

	//-------------------------------------------------------------------
	//checkbox 全选
	function selectall(obj, name) {
		if(obj.checked) {
			$("input[type=checkbox][name='" + name + "']").prop("checked", true);
		} else {
			$("input[type=checkbox][name='" + name + "']").prop("checked", false);
		}
	}
	//批量删除弹窗
	function delmseeage(txt, who) {
		layer.alert(txt, {
			btn: ['确认', '取消'], //按钮

		}, function() {
			del(who);
			layer.open({
				content: '删除成功',
				time: 1
			});
		});
	}

	function del(who) {
		//        console.log(who);
		var str = [];
		$.each($('input[name="' + who + '"]:checkbox:checked'), function() {
			str.push($(this).val());
		});
		//		console.log(str);
		$.get("{:url('Operations/delete')}", {
			data: str,
			type: who
		}, function(flag) {
			//            console.log(flag);
			//删除后，对应的板块更新
			if(flag.code == 1) {
				layer.msg(flag.msg, {
					icon: 1,
					time: 2000
				}, function() {
					Ajaxpage_profile();
				});
			} else {
				layer.msg(flag.msg, {
					icon: 2,
					time: 2000
				}, function() {});
			}
		})
	}
	//日期选择
	$("#datetimeStart").datetimepicker({
		language: 'cn',
		format: "yyyy-mm-dd",
		autoclose: true,
		minView: "month",
		maxView: "decade",
		todayBtn: true,
		pickerPosition: "bottom-left"
	}).on("click", function(ev) {
		$("#datetimeStart").datetimepicker("setEndDate", $("#datetimeEnd").val());
	});
	$("#datetimeEnd").datetimepicker({
		language: 'cn',
		format: "yyyy-mm-dd",
		autoclose: true,
		minView: "month",
		maxView: "decade",
		todayBtn: true,
		pickerPosition: "bottom-left"
	}).on("click", function(ev) {
		$("#datetimeEnd").datetimepicker("setStartDate", $("#datetimeStart").val());
	});

	//选择城市三级联动
	$(function() {
		$.each(province, function(k, p) {
			var option = "<option value='" + p.area_name + "'  title='" + p.id + "'>" + p.area_name + "</option>";
			$("#province").append(option);
		});

		$("#province").change(function() {
			//					var selValue = $(this).val();
			var name = $(this).find("option:selected").attr("title");
			//					$(".province").text(name);
			$("#city option:gt(0)").remove();
			$("#area option:gt(0)").remove();
			$.each(city, function(k, p) {
				if(p.parent_id == name) {
					var option = "<option value='" + p.area_name + "' title='" + p.id + "'>" + p.area_name + "</option>";
					$("#city").append(option);
				}
			});

		});

		$("#city").change(function() {
			//					var selValue = $(this).val();
			var name = $(this).find("option:selected").attr("title");;
			//					$(".city").text(name);
			$("#area option:gt(0)").remove();

			$.each(area, function(k, p) {
				if(p.parent_id == name) {
					var option = "<option value='" + p.id + "'>" + p.area_name + "</option>";
					$("#area").append(option);
				}
			});
		});

	});
	$(function() {
		$.each(province, function(k, p) {
			var option = "<option value='" + p.area_name + "'  title='" + p.id + "'>" + p.area_name + "</option>";
			$("#province1").append(option);
		});

		$("#province1").change(function() {
			//					var selValue = $(this).val();
			var name = $(this).find("option:selected").attr("title");
			//					$(".province").text(name);
			$("#city1 option:gt(0)").remove();
			$("#area1 option:gt(0)").remove();
			$.each(city, function(k, p) {
				if(p.parent_id == name) {
					var option = "<option value='" + p.area_name + "' title='" + p.id + "'>" + p.area_name + "</option>";
					$("#city1").append(option);
				}
			});
		});

		$("#city1").change(function() {
			//					var selValue = $(this).val();
			var name = $(this).find("option:selected").attr("title");;
			//					$(".city").text(name);
			$("#area1 option:gt(0)").remove();

			$.each(area, function(k, p) {
				if(p.parent_id == name) {
					var option = "<option value='" + p.id + "'>" + p.area_name + "</option>";
					$("#area1").append(option);
				}
			});
		});

	});

	function jiebang(id) {
		$.getJSON('{:url("Operations/del")}', {
			id: id
		}, function(data) {
			top.layer.msg(data.msg, {
				icon: 1,
				time: 2000
			}, function() {
				Ajaxpage_profile();
			});
		});
	}
</script>